<div id="abstractDetail" data-bind="with: bookVM" class="book" style="background-color: red;">
	<div class="row header navigation-bar-bgd">
		<div class="left-btns">
			<div class="back clickableEffect" id="fastButtonBack">
				<div class="btn-back">
				</div>
			</div>
			<div id="nav-btn-font-size" class="btn-left-toolBar clickableEffect" data-bind="click: bookVM.showHideFontEdit">&nbsp;</div>
			<!--<div id="nav-btn-smaller" class="btn-left-toolBar clickableEffect" data-bind="click: bookVM.decreaseFontSize">&nbsp;</div>-->
		</div>
		<div class="right-btns">
			<div id="nav-btn-add-favorite" class="btn-right-toolBar clickableEffect" data-bind="click: bookVM.addToFavorite">&nbsp;</div>
			<div id="nav-btn-share" class="btn-right-toolBar clickableEffect" data-bind="click: bookVM.shareSocialNetwork">&nbsp;</div>
			<div class="search clickableEffect" data-bind="click: $root.viewSearch">
				<div class="search-icon">&nbsp;</div>
			</div>
		</div>
	</div>
    <div class="font-book" data-bind="style: {display: $root.bookVM.isEditFont() ? 'block' : 'none'}">
        <!-- ko template:{name:'fontBookTmpl'}-->
        <!--/ko-->
    </div>
	<div id="wrapper_scrollview" class="wrapper" data-bind="style:{backgroundColor: $root.bookVM.backgroundColorName()}">
		<div>
			<div class="search-space" data-bind="visible: $root.isViewSearch">&nbsp;</div>
			<div data-bind="with: entity" class="default-font">
				<div style="background-color: #F6F6F6; height: auto;">
					<div style="height: auto; width: 100%;">
						<div style="height: 158px; float: left;">
							<div class="detail-images" style="z-index: 0">
								<img class="sml-loading" />
							</div>
							<img id="detail-image" onLoad=" $(this).fadeIn('normal').siblings('div').fadeOut('normal') " data-bind="attr:{src: overView.thumbnailMediumDisplay}" style="display: none; z-index: 1" class="detail-images shadow-border-cover" />
						</div>
						<div style="margin-left: 122px; float: left; margin-right: 10px;">
							<a class="title" data-bind="text: header.title()"></a>
							<!--<a class="sub-title" data-bind="text: header.subtitle()"></a>-->
							<div>
								<div class="detail-overview-author author" data-bind="text: header.authorsLastNameFirst() + ', ' + header.year()"></div>
								<div class="detail-overview-author author" data-bind="text: header.extraText(), style:{display: header.extraText().length > 0 ? 'block' : 'none'}"></div>
								<div class="detail-overview-text" data-bind="text: header.subtitle()"></div>
							</div>
						</div>
						<br style="clear: both" />
					</div>
					<div style="width: 100%; height: 36px; margin-top: 5px;">
						<div class="btn-buy-the-book clickableEffect" data-bind="click: bookVM.buyTheBook, text: bookVM.entity().header.fullText.text()">Buy the book</div>
						<div data-bind="style: { display: bookVM.entity().overView.preview() ? 'block' : 'none'}, click: bookVM.activeBook" class="btn-get-summary clickableEffect">
							<div class="btn-get-summary-label" data-bind="text: bookVM.strGetSummary">Get summary</div>
							<div class="btn-get-summary-remain" data-bind="text: systemLanguage!='es' ? bookVM.numberFreeBooks() + ' ' + bookVM.strRemaining() : bookVM.strRemaining() + ' ' + bookVM.numberFreeBooks()"></div>
						</div>
					</div>
					<div class="multi-grp">
						<div class="multi-btn" data-bind="click: bookVM.DisplayPlayer">
							<div class="sub-multi-btn">
								<div class="icon-audio clickableEffect" data-bind="style: {display: bookVM.isHaveAudio() ? 'block' : 'none'}">&nbsp;</div>
								<div class="icon-audio unselect" data-bind="style: {display: bookVM.isHaveAudio() ? 'none' : 'block'}">&nbsp;</div>
								<p data-bind="text: bookVM.strAudio">audio</p>
							</div>
							<div class="detail-vertical-line vertical-line1">&nbsp;</div>
						</div>
						<div class="multi-btn clickableEffect" data-bind="click: bookVM.viewComments">
							<div class="sub-multi-btn">
								<div class="icon-comment" data-bind="text: bookVM.entity().overView.numberComment()"></div>
								<p data-bind="text: bookVM.strComments()">comments</p>
							</div>
							<div class="detail-vertical-line vertical-line2">&nbsp;</div>
						</div>
						<div class="multi-btn clickableEffect">
							<div class="sub-multi-btn">
								<div class="icon-annotation" data-bind="click: bookVM.getAnnotaions">&nbsp;</div>
								<p data-bind="text: bookVM.strAnnotations()">annotations</p>
							</div>
							<div class="detail-vertical-line vertical-line3">&nbsp;</div>
						</div>
						<div class="multi-btn clickableEffect">
							<div class="sub-multi-btn">
								<div class="icon-quote" data-bind="click: $root.viewQuotes, style: {display: bookVM.entity().quote.quotes().length > 0 ? 'block' : 'none'}">&nbsp;</div>
                                <div class="icon-quote unselect" data-bind="style: {display: bookVM.entity().quote.quotes().length == 0 ? 'block' : 'none'}">&nbsp;</div>
								<p data-bind="text: bookVM.strQuotes">quotes</p>
							</div>
						</div>
					</div>
					<div class="palyer-div" data-bind="style: { display: bookVM.isDisplayPlayer() ? 'block' : 'none' }">
						<div class="timer-display" id="time_playing">
							00:00
						</div>
						<div class="seekbar-frame">
							<!-- Only apply for ios -->
							<input class="seekbar" type="range" step="1" id="seekbar" data-bind="attr:{value: bookVM.soundCurrentPossision(), min:0, max: bookVM.soundDuration()}" ></input>
						</div>
						<div class="play-pause-button" data-bind="click: bookVM.playMedia">
							<img data-bind="attr:{src: bookVM.isPlaying() ? 'img/pause.png' : 'img/play.png' }">
						</div>
						<div class="play-pause-label" data-bind="text: bookVM.isPlaying() ? 'Pause' : 'Play'">
						</div>
					</div>
					<div style="height: 2px;">&nbsp;</div>
				</div>

				<div class="settings-line-light-midle">&nbsp;</div>

                <div class="book-detail" data-bind="style:{backgroundColor: $root.bookVM.backgroundColorName(), fontFamily: $root.bookVM.textFontName() + ', Times, serif'}">
					<!-- rating -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', display: rating.ratings().length != 0 ? 'block' : 'none', fontFamily: $root.bookVM.textFontName() + ', Times, serif'}, text: rating.subtitle()">Rating</div>
					<ul style="color: #ffffff;" data-bind="foreach: rating.ratings, style: { fontSize: bookVM.fontSizeContent() + 'px'}">
						<li class="black-color customize-font" data-bind="text: caption + ': ' + value, style:{ color: $root.bookVM.textColorName(), background: $root.bookVM.isBuletWhite() ? 'url(img/bullet-white.png) no-repeat' : 'url(img/bullet.png) no-repeat', backgroundSize: '8px 8px', backgroundPosition: '10px ' + bookVM.topLi() + 'px'}"></li>
					</ul>
					<!-- What you will learn -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', fontFamily: $root.bookVM.textFontName() + ', Times, serif', display: relevance.learntopics().length != 0 ? 'block' : 'none' }, text: relevance.learnintro()">What you will learn</div>
                    <!--<div class="sub-heading" data-bind="style: { fontSize: bookVM.fontSizeContent() + 'px', fontFamily: $root.bookVM.textFontName() + ', Times, serif', display: relevance.learntopics().length != 0 ? 'block' : 'none' }, text: relevance.learnintro(), color: $root.bookVM.textColorName()">What you will learn</div>-->
					<ul data-bind="foreach: relevance.learntopics, style: { fontSize: bookVM.fontSizeContent() + 'px' }">
						<li class="black-color customize-font" data-bind="html: text, style:{color: $root.bookVM.textColorName(), background: $root.bookVM.isBuletWhite() ? 'url(img/bullet-white.png) no-repeat' : 'url(img/bullet.png) no-repeat', backgroundSize: '8px 8px', backgroundPosition: '10px ' + bookVM.topLi() + 'px'}"></li>
					</ul>
					<!-- take aways -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', display: takeAway.takeaways().length != 0 ? 'block' : 'none', fontFamily: $root.bookVM.textFontName() + ', Times, serif' }, text: takeAway.title()">Take-Aways</div>
					<ul data-bind="foreach: takeAway.takeaways, style: { fontSize: bookVM.fontSizeContent() + 'px'}">
						<li class="black-color customize-font" data-bind="html: text, style:{color: $root.bookVM.textColorName(), background: $root.bookVM.isBuletWhite() ? 'url(img/bullet-white.png) no-repeat' : 'url(img/bullet.png) no-repeat', backgroundSize: '8px 8px', backgroundPosition: '10px ' + bookVM.topLi() + 'px'}"></li>
					</ul>
					<!-- Recommendation -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', fontFamily: $root.bookVM.textFontName() + ', Times, serif', display: relevance.recommendation.text() != undefined ? 'block' : 'none'}, text: relevance.recommendation.title()">Recommendation</div>
					<div class="black-color" data-bind="html: relevance.recommendation.text(), style: { fontSize: bookVM.fontSizeContent() + 'px', color: $root.bookVM.textColorName()}"></div>
					<!-- Abstract -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', display: bookVM.entity().abstract.text() != undefined ? 'block' : 'none', fontFamily: $root.bookVM.textFontName() + ', Times, serif'}, text: abstract.title()">Abstract</div>
					<div class="black-color" data-bind="html: bookVM.entity().abstract.text(), style: { fontSize: bookVM.fontSizeContent() + 'px', color: $root.bookVM.textColorName()}"></div>
					<!-- Quotes -->
					<!--<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', display: quote.quotes().length != 0 ? 'block' : 'none', fontFamily: $root.bookVM.textFontName() + ', Times, serif'}, text: quote.title()">Quotes</div>
					<ul data-bind="foreach: quote.quotes, style: { fontSize: bookVM.fontSizeContent() + 'px'}">
						<li class="black-color customize-font" data-bind="html: text, style:{color: $root.bookVM.textColorName(), background: $root.bookVM.isBuletWhite() ? 'url(img/bullet-white.png) no-repeat' : 'url(img/bullet.png) no-repeat', backgroundSize: '8px 8px', backgroundPosition: '10px ' + bookVM.topLi() + 'px'}"></li>
					</ul>-->
					<!-- About the authors -->
					<div class="heading" data-bind="style: { fontSize: bookVM.fontSizeTitle() + 'px', fontFamily: $root.bookVM.textFontName() + ', Times, serif', display: bookVM.entity().aboutAuthor.text() != undefined ? 'block' : 'none'}, text: aboutAuthor.title()">About the authors</div>
					<div class="black-color" data-bind="html: bookVM.entity().aboutAuthor.text(), style: { fontSize: bookVM.fontSizeContent() + 'px', color: $root.bookVM.textColorName()}"></div>
					<div style="width: 100%; height: 20px;">&nbsp;</div>
				</div>
			</div>
		</div>
	</div>
</div>